<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 企业资产管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/zc.css">
</head>
<body>

<!-- 头部导航 -->
<header class="header">
    <div class="logo">
        <i class="bi bi-building"></i>
        <span>企业资产管理系统</span>
    </div>
    <div class="header-right">
        <div class="notification-icon">
            <i class="bi bi-bell"></i>
            <span class="notification-badge">3</span>
        </div>
        <div class="dropdown">
            <a href="#" class="dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://cn.bing.com/images/search?view=detailV2&ccid=OSFH3hIu&id=6E8860BEADD760736BEA422E3C9BF57317AA4F3E&thid=OIP.OSFH3hIukHqh-qrOvIfUWgAAAA&mediaurl=https%3a%2f%2fc-ssl.dtstatic.com%2fuploads%2fblog%2f202303%2f20%2f20230320145706_07ca5.thumb.400_0.jpeg&exph=498&expw=400&q=%e5%a4%b4%e5%83%8f&simid=607997774809754286&FORM=IRPRST&ck=19ACE4792BC2347CFE89D1BC55CC90F4&selectedIndex=0&itb=0" class="rounded-circle user-avatar" alt="用户头像">
                <span>管理员</span>
                <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>个人信息</a></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>系统设置</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a></li>
            </ul>
        </div>
    </div>
</header>

<!-- 主体内容 -->
<div class="main-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li class="sidebar-item">
                <a href="home.jsp" class="sidebar-link">
                    <i class="bi bi-speedometer2"></i>
                    <span>控制面板</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="Inventory_Query.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#assetMenu">
                    <i class="bi bi-laptop"></i>
                    <span>资产管理</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="assetMenu">
                    <li class="sidebar-item">
                        <a href="Inventory_Query.jsp" class="sidebar-link active">
                            <span>库存查询</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Asset_Inbound.jsp" class="sidebar-link">
                            <span>资产入库</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Asset_Scrap.jsp" class="sidebar-link">
                            <span>资产报废</span>
                        </a>
                    </li>
                </ul>
            </li>


            <li class="sidebar-item">
                <a href="Maintenance_Apply.jsp" class="sidebar-link dropdown-toggle" data-bs-target="#maintenanceMenu">
                    <i class="bi bi-tools"></i>
                    <span>维修管理</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse" id="maintenanceMenu">
                    <li class="sidebar-item">
                        <a href="Maintenance_Apply.jsp" class="sidebar-link">
                            <span>维修申请</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="maintenance_record.jsp" class="sidebar-link">
                            <span>维修记录</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="Statistics_Report.jsp" class="sidebar-link">
                            <span>维修统计</span>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="sidebar-item">
                <a href="user_management.jsp" class="sidebar-link dropdown-toggle active" data-bs-target="#systemMenu">
                    <i class="bi bi-gear"></i>
                    <span>系统设置</span>
                    <i class="bi bi-chevron-down"></i>
                </a>
                <ul class="sidebar-dropdown collapse show" id="systemMenu">
                    <li class="sidebar-item">
                        <a href="user_management.jsp" class="sidebar-link active">
                            <span>用户管理</span>
                        </a>
                    </li>

                    <li class="sidebar-item">
                        <a href="Department_Management.jsp" class="sidebar-link">
                            <span>部门管理</span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </aside>

    <!-- 内容区域 -->
    <main class="content">
        <h2 class="page-title">用户管理</h2>
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>用户列表</span>
                <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal" id="add">添加用户</button>
            </div>

            <!-- 添加用户模态框 -->
            <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addUserModalLabel">添加用户</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="addUserForm">
                                <div class="mb-3">
                                    <label for="modalUsername" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="modalUsername" required>
                                </div>
                                <div class="mb-3">
                                    <label for="modalPassword" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="modalPassword" required>
                                </div>
                                <div class="mb-3">
                                    <label for="modalName" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="modalName" required>
                                </div>
                                <div class="mb-3">
                                    <label for="modalEmail" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="modalEmail" required>
                                </div>
                                <div class="mb-3">
                                    <label for="modalPhone" class="form-label">手机号</label>
                                    <input type="text" class="form-control" id="modalPhone" required>
                                </div>
                                <div class="mb-3">
                                    <label for="modalRole" class="form-label">角色</label>
                                    <select class="form-select" id="modalRole" required>
                                        <option value="0">选择角色</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            <button type="button" id="addSubmit" class="btn btn-primary" onclick="submitUserForm()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 编辑用户模态框 -->
            <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editUserModalLabel">编辑用户</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="editUserForm">
                                <div class="mb-3">
                                    <label for="editUsername" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="editUsername" required>
                                </div>
                                <div class="mb-3">
                                    <label for="editPassword" class="form-label">密码</label>
                                    <input type="password" class="form-control" id="editPassword" required>
                                </div>
                                <div class="mb-3">
                                    <label for="editName" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="editName" required>
                                </div>
                                <div class="mb-3">
                                    <label for="editEmail" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" id="editEmail" required>
                                </div>
                                <div class="mb-3">
                                    <label for="editPhone" class="form-label">手机号</label>
                                    <input type="text" class="form-control" id="editPhone" required>
                                </div>
                                <div class="mb-3">
                                    <label for="editRole" class="form-label">角色</label>
                                    <select class="form-select" id="editRole" required>
                                        <option value="0">选择角色</option>
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            <button type="button" id="updateData" class="btn btn-primary" onclick="submitEditUserForm()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>姓名</th>
                            <th>邮箱</th>
                            <th>手机号</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="neirong">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <span>版权所有 &copy; 2023 资产管理系统</span>
            </div>
            <div class="col-md-6 text-md-end">
                <span>技术支持：XXX公司</span>
            </div>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化所有下拉菜单
        const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'));
        dropdownElementList.map(function (dropdownToggleEl) {
            return new bootstrap.Dropdown(dropdownToggleEl);
        });

        // 获取所有带有dropdown-toggle类的链接
        const dropdownToggles = document.querySelectorAll('.sidebar-link.dropdown-toggle');

        // 为每个下拉菜单添加点击事件
        dropdownToggles.forEach(toggle => {
            toggle.addEventListener('click', function(e) {
                const href = this.getAttribute('href');

                // 如果有href属性且不是#或javascript:，则执行导航
                if (href && href !== '#' && !href.startsWith('javascript')) {
                    window.location.href = href;
                    return;
                }

                // 阻止默认行为
                e.preventDefault();

                // 获取目标菜单的ID
                const targetId = this.getAttribute('data-bs-target');
                const targetMenu = document.querySelector(targetId);

                // 获取当前菜单的箭头图标
                const arrowIcon = this.querySelector('.bi-chevron-down, .bi-chevron-up');

                // 切换目标菜单的显示状态
                if (targetMenu) {
                    const isShowing = targetMenu.classList.toggle('show');

                    // 根据显示状态更新箭头图标
                    if (arrowIcon) {
                        if (isShowing) {
                            arrowIcon.classList.remove('bi-chevron-down');
                            arrowIcon.classList.add('bi-chevron-up');
                        } else {
                            arrowIcon.classList.remove('bi-chevron-up');
                            arrowIcon.classList.add('bi-chevron-down');
                        }
                    }
                }

                // 关闭其他打开的下拉菜单
                document.querySelectorAll('.sidebar-dropdown').forEach(menu => {
                    if (menu !== targetMenu && menu.classList.contains('show')) {
                        menu.classList.remove('show');
                        // 重置其他菜单的箭头图标
                        const otherToggle = document.querySelector(`[data-bs-target="#${menu.id}"]`);
                        if (otherToggle) {
                            const otherArrow = otherToggle.querySelector('.bi-chevron-up');
                            if (otherArrow) {
                                otherArrow.classList.remove('bi-chevron-up');
                                otherArrow.classList.add('bi-chevron-down');
                            }
                        }
                    }
                });
            });
        });
    });
</script>
<script>
    // 添加用户方法
    function submitUserForm() {
        // 关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('addUserModal'));
        modal.hide();
    }

    // 修改用户方法
    function submitEditUserForm() {
        // 关闭模态框
        const modal = bootstrap.Modal.getInstance(document.getElementById('editUserModal'));
        modal.hide();
    }
</script>

<script src="/static/jq/jquery-1.4.4.min.js"></script>
<script>
    // 立即执行函数展示列表
    $(function (){
        $.ajax({
            url:"/getUserList",
            dataType:"json",
            success:function (data){
                console.log(data)
                for (var i =0; i < data.userList.length;i++){
                    $("#neirong").append(
                        "<tr>" +
                        "<td>" + data.userList[i].id + "</td>" +
                        "<td>" + data.userList[i].username + "</td>" +
                        "<td>" + data.userList[i].password + "</td>" +
                        "<td>" + data.userList[i].name + "</td>" +
                        "<td>" + data.userList[i].email + "</td>" +
                        "<td>" + data.userList[i].phone + "</td>" +
                        "<td>" +
                        "<button class='btn btn-sm btn-info' data-bs-toggle='modal' data-bs-target='#editUserModal' onclick='populateEditForm("+data.userList[i].id+")' class='edit'>编辑</button>" +
                        "<button class='btn btn-sm btn-danger' onclick='deleteData("+data.userList[i].id+")'>删除</button></td>"+
                    "</tr>"
                )
                }

                for (var i = 0; i <data.role.length;i++){
                    $("#modalRole").append(
                        "<option value="+data.role[i].id+">"+data.role[i].name+"</option>"
                    )
                }

                for (var i = 0; i <data.role.length;i++){
                    $("#editRole").append(
                        "<option value="+data.role[i].id+">"+data.role[i].name+"</option>"
                    )
                }

            }
        })
    })

    // 点击编辑按钮执行方法
    function populateEditForm(id) {
        $.ajax({
            url:"/upUser",
            dataType:"json",
            data:{
                id:id
            },
            success:function (data){
                console.log(data)
                $("#editUsername").val(data.user.username)
                $("#editPassword").val(data.user.password)
                $("#editName").val(data.user.name)
                $("#editEmail").val(data.user.email)
                $("#editPhone").val(data.user.phone)
                $("#editRole").val(data.user.rid)
                // 点击编辑页面的提交按钮
                $("#updateData").click(function (){
                    $.ajax({
                        url:"/upUser2",
                        data:{
                            id:id,
                            username: $("#editUsername").val(),
                            password: $("#editPassword").val(),
                            name: $("#editName").val(),
                            email: $("#editEmail").val(),
                            phone:$("#editPhone").val(),
                            rid: $("#modalRole").val()
                        },
                        dataType:"json",
                        success:function (data){
                            $("#neirong").empty()
                            console.log(data)
                            $.ajax({
                                url:"/getUserList",
                                dataType:"json",
                                success:function (data){
                                    $("#neirong").empty()
                                    console.log(data)
                                    for (var i =0; i < data.userList.length;i++){
                                        $("#neirong").append(
                                            "<tr>" +
                                            "<td>" + data.userList[i].id + "</td>" +
                                            "<td>" + data.userList[i].username + "</td>" +
                                            "<td>" + data.userList[i].password + "</td>" +
                                            "<td>" + data.userList[i].name + "</td>" +
                                            "<td>" + data.userList[i].email + "</td>" +
                                            "<td>" + data.userList[i].phone + "</td>" +
                                            "<td>" +
                                            "<button class='btn btn-sm btn-info' data-bs-toggle='modal' data-bs-target='#editUserModal' onclick='populateEditForm("+data.userList[i].id+")' class='edit'>编辑</button>" +
                                            "<button class='btn btn-sm btn-danger' onclick='deleteData("+data.userList[i].id+")'>删除</button></td>"+
                                            "</tr>"
                                        )
                                    }

                                    for (var i = 0; i <data.role.length;i++){
                                        $("#modalRole").append(
                                            "<option value="+data.role[i].id+">"+data.role[i].name+"</option>"
                                        )
                                    }

                                }
                            })
                        }
                    })
                })
            }
        })

    }

    // 点击删除按钮执行方法
    function deleteData(id) {
        $.ajax({
            url:"/del",
            dataType:"json",
            data:{
                id:id
            },
            success:function (data){
                $("#neirong").empty()
                console.log(data)
                $.ajax({
                    url:"/getUserList",
                    dataType:"json",
                    success:function (data){
                        console.log(data)
                        for (var i =0; i < data.userList.length;i++){
                            $("#neirong").append(
                                "<tr>" +
                                "<td>" + data.userList[i].id + "</td>" +
                                "<td>" + data.userList[i].username + "</td>" +
                                "<td>" + data.userList[i].password + "</td>" +
                                "<td>" + data.userList[i].name + "</td>" +
                                "<td>" + data.userList[i].email + "</td>" +
                                "<td>" + data.userList[i].phone + "</td>" +
                                "<td>" +
                                "<button class='btn btn-sm btn-info' data-bs-toggle='modal' data-bs-target='#editUserModal' onclick='populateEditForm("+data.userList[i].id+")' class='edit'>编辑</button>" +
                                "<button class='btn btn-sm btn-danger' onclick='deleteData("+data.userList[i].id+")'>删除</button></td>"+
                                "</tr>"
                            )
                        }
                    }
                })
            }
        })
    }

    // 点击添加按钮
    $("#addSubmit").click(function (){
        $.ajax({
            url:"/addUser",
            dataType: "json",
            data:{
                username:$("#modalUsername").val(),
                name:$("#modalName").val(),
                email: $("#modalPhone").val(),
                phone:$("#modalEmail").val(),
                password:$("#modalPassword").val(),
                rid:$("#modalRole").val()
            },
            success:function (data){
                console.log(data)
                $.ajax({
                    url:"/getUserList",
                    dataType:"json",
                    success:function (data){
                        $("#neirong").empty()
                        console.log(data)
                        for (var i =0; i < data.userList.length;i++){
                            $("#neirong").append(
                                "<tr>" +
                                "<td>" + data.userList[i].id + "</td>" +
                                "<td>" + data.userList[i].username + "</td>" +
                                "<td>" + data.userList[i].password + "</td>" +
                                "<td>" + data.userList[i].name + "</td>" +
                                "<td>" + data.userList[i].email + "</td>" +
                                "<td>" + data.userList[i].phone + "</td>" +
                                "<td>" +
                                "<button class='btn btn-sm btn-info' data-bs-toggle='modal' data-bs-target='#editUserModal' onclick='populateEditForm("+data.userList[i].id+")' class='edit'>编辑</button>" +
                                "<button class='btn btn-sm btn-danger' onclick='deleteData("+data.userList[i].id+")'>删除</button></td>"+
                                "</tr>"
                            )
                        }

                        for (var i = 0; i <data.role.length;i++){
                            $("#modalRole").append(
                                "<option value="+data.role[i].id+">"+data.role[i].name+"</option>"
                            )
                        }

                    }
                })
            }
        })

    })


</script>
</body>
</html> 